<template>
    <div class="hero">
        <div class="hero-item">
            <img src="/hero01.png" alt="" />
            <img src="/hero02.png" alt="" />
        </div>
        <div class="hero-item">
            <img src="/hero03.png" alt="" />
            <img src="/hero04.png" alt="" />
        </div>
        <div class="spline-container hero-item">
            <canvas ref="splineCanvas"></canvas>
        </div>
        <div class="hero-item">
            <img src="/hero05.png" alt="" />
            <img src="/hero06.png" alt="" />
        </div>
        <div class="hero-item">
            <img src="/hero07.png" alt="" />
            <img src="/hero08.png" alt="" />
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { Application } from '@splinetool/runtime'
import { getRandomMultipleInRange } from "../utils/index"
import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
gsap.registerPlugin(ScrollTrigger)

const splineCanvas = ref(null)
const app = ref(null)

onMounted(async () => {
    if (splineCanvas.value) {
        document.querySelectorAll('.hero-item img').forEach(img => {
            img.style.marginTop = getRandomMultipleInRange(100, 400, 50) + 'px'
        })
        const app = new Application(splineCanvas.value)
        await app.load('https://prod.spline.design/oqexVXpS59h54Vdy/scene.splinecode')
        const main = app.findObjectById("3c287c31-40d9-4b71-81d5-bfa02215f540")
        if (main) {
            main.scale.set(20, 20, 20)
        }
    }

    const tl = gsap.timeline()

    tl.fromTo(
        'img',
        {
            alpha: 0,
            rotationX: 90,
            rotationY: 50,
        },
        {
            alpha: 1,
            rotationX: 0,
            rotationY: 0,
            force3D: true,
            duration: 0.8
        },
        2.5
    )

    gsap.to('.hero-item', {
        scrollTrigger: {
            trigger: 'div',
            toggleActions: 'restart pause resume reset',
            start: 'top 100px',
            scrub: 1,
        },
        y: (i) => {
            return i % 2 ? -200 : -400
        },
        duration: 3
    })
})

onUnmounted(() => {
    if (app.value) {
        app.value.dispose()
    }
})
</script>

<style scoped>
.hero {
    display: flex;
    padding-bottom: 100px;
}

.hero-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    perspective: 1000px;

    img {
        width: 10vw;
        border-radius: 10px;
    }
}

.spline-container {
    height: 100vh;
    position: sticky;
    top: 0;

}
</style>
